import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
/**
 *  前端需要安装的模块
 * Axios 是一个基于 Promise 的 HTTP 请求库，用于在浏览器和 Node.js 中发送 HTTP 请求。它可以用于前端与后端之间的数据交互，例如获取和发送数据、文件上传等。
 * axios 
 * Pinia 是一个用于处理 Vue 应用程序的状态管理库。它专注于提供一种简单且可扩展的方式来管理应用程序中的状态。Pinia 借鉴了 Vuex 的思想，但采用了更加现代的 API 设计，以更好地与 Vue 3.x 兼容。
 * pinia
 * Sass 是一种 CSS 预处理器，它提供了一些强大的功能和语法扩展，帮助开发者更高效地编写可维护和可扩展的 CSS 代码。Sass 提供了变量、嵌套规则、Mixin 等功能，可以使开发者更方便地组织和重用样式代码。
 * sass
 * Vue Router 是 Vue.js 的官方路由器，它通过管理应用程序的路由状态，实现了单页应用（SPA）的路由功能。Vue Router 允许开发者定义路由和视图之间的映射关系，并提供了导航守卫、动态路由、嵌套路由等功能，帮助开发者实现页面导航和路由切换。
 * vue-router
 * Naive UI 是一套 Vue 3.x 的 UI 组件库，它提供了一系列精美且易于使用的 UI 组件，帮助开发者快速构建美观且响应式的界面。Naive UI 遵循 Material Design 设计原则，并提供了类似于 Element UI 的组件集合，如按钮、表格、弹窗等，以及一些自定义组件用于特定的场景。
 * naive-ui
 * Wangeditor 是一款基于 JavaScript 的富文本编辑器，它能够在前端实现类似于微信公众号编辑器的功能。Wangeditor 提供了一系列的编辑工具和插件，支持图片上传、撤销、重做、表格编辑等功能，方便用户在网页上进行富文本内容的编辑和展示。在 Vue 中使用 Wangeditor 可以方便地集成和管理富文本编辑器的功能。
 * wangeditor
 * Vue-ECharts vue 数据图组件
 * npm install vue-echarts echarts
 */
 import naive from 'naive-ui'
 import { createDiscreteApi } from 'naive-ui'
 import { router } from './common/router'
 import { createPinia } from "pinia";
 import axios from 'axios'
 import { AdminStore } from './stores/AdminStore'
  
 //定义全局服务端接口地址
 axios.defaults.baseURL = "http://localhost:8080"

 const { message,notification,dialog } = createDiscreteApi(["message","dialog","notification"])




const app = createApp(App)

app.provide("axios",axios)
app.provide("message",message)
app.provide("notification",notification)
app.provide("dialog",dialog) 
// 统一服务端路径地址
app.provide("server_url", axios.defaults.baseURL) 


// 引用ui 框架
app.use(naive)
app.use(createPinia());
app.use(router);

// 添加拦截器优化用户信息过滤
// 获取用户存储信息
const adminStore = AdminStore()
// 这句话的意思是前端的每一个请求都会先执行这一步，每次都会调用该方法进行用户信息的判断
axios.interceptors.request.use((config)=>{
    // 问题再这里， token 没有存储值
    //console.log("token:" + adminStore.token)

    config.headers.token = adminStore.token 

    return config
})



app.mount('#app')
